//页面的布局
initializeColumns = function() {

	new MUI.Column({
		id: 'sideColumn1',
		placement: 'left',
		width: 200,
		resizeLimit: [100, 300]
	});
	
	new MUI.Column({
		id: 'mainColumn',
		placement: 'main',
		resizeLimit: [100, 300]
	});
	
	new MUI.Column({
		id: 'sideColumn2',
		placement: 'right',
		width: 220,
		resizeLimit: [200, 300]
	});
	
	// Add panels to first side column
	new MUI.Panel({
		id: 'files-panel',
		title: 'Examples',		
		contentURL: 'pages/file-view.html',
		column: 'sideColumn1',
		require: {
			css: [MUI.path.plugins + 'tree/css/style.css'],			
			js: [MUI.path.plugins + 'tree/scripts/tree.js'],
			onload: function(){
				if (buildTree) buildTree('tree1');
			}	
		},
		onContentLoaded: function(){		
			$('notesLink').addEvent('click', function(e){
				MUI.updateContent({
					element: $('mainPanel'),					
					url: 'pages/notes.html',
					title: 'Development Notes',
					padding: { top: 8, right: 8, bottom: 8, left: 8 }
				});
			});
			$('xhrLink').addEvent('click', function(e){
				MUI.updateContent({
					element: $('mainPanel'),
					url: 'pages/lipsum.html',
					title: 'Lorem Ipsum',
					padding: { top: 8, right: 8, bottom: 8, left: 8 }
				});
			});
			$('youtube4Link').addEvent('click', function(e){
				MUI.updateContent({
					element: $('mainPanel'),
					loadMethod: 'iframe',
					url: 'pages/youtube.html',
					title: 'Iframe: YouTube',
					padding: { top: 0, right: 0, bottom: 0, left: 0 }
				});
			});	
			$('splitPanelLink').addEvent('click', function(e){
				MUI.updateContent({
					element: $('mainPanel'),
					title: 'Split Panel',
					padding: { top: 0, right: 0, bottom: 0, left: 0 }
				});
				MUI.splitPanelPanel(); // This is initialized in mocha-init.js just like the windows.	
			});	
			$('splitWindowLink').addEvent('click', function(e){
				MUI.splitWindow();
			});		
			$('ajaxpageLink').addEvent('click', function(e){
				MUI.ajaxpageWindow();
			});	
			$('jsonLink').addEvent('click', function(e){
				MUI.jsonWindows();
			});	
			$('youtubeLink').addEvent('click', function(e){
				MUI.youtubeWindow();
			});	
			$('accordiantestLink').addEvent('click', function(e){
				MUI.accordiantestWindow();
			});	
			$('clockLink').addEvent('click', function(e){
				MUI.clockWindow();
			});
			$('parametricsLink').addEvent('click', function(e){
				MUI.parametricsWindow();
			});
			$('calendarLink').addEvent('click', function(e){
				MUI.updateContent({
					element: $('mainPanel'),
					url: MUI.path.plugins + 'calendar/example.html',
					title: 'Calendar Component',
					padding: { top: 8, right: 8, bottom: 8, left: 8 },
					require: {
						css: [MUI.path.plugins + 'calendar/css/calendar.css'],			
						js: [MUI.path.plugins + 'calendar/scripts/calendar.js'],
						onload: function(){
							myCal1 = new Calendar({ date1: 'd/m/Y' }, { direction: 1, tweak: { x: 6, y: 0 }});;
						}	
					}										
				});
			});			
			$('fxmorpherLink').addEvent('click', function(e){
				MUI.updateContent({
					element: $('mainPanel'),
					url: MUI.path.plugins + 'Fx.Morpher/',
					title: 'Fx.Morpher Path Animation',
					padding: { top: 8, right: 8, bottom: 8, left: 8 }
				});
				MUI.fxmorpherWindow();
			});			
		}
	});
	
	new MUI.Panel({
		id: 'panel2',
		title: 'Ajax Form',
		contentURL: 'pages/ajax.form.html',
		column: 'sideColumn1',
		height: 230,
		onContentLoaded: function(){
			$('myForm').addEvent('submit', function(e){
				e.stop();

				$('spinner').show();
				if ($('postContent') && MUI.options.standardEffects == true) {
					$('postContent').setStyle('opacity', 0);	
				}
				else {
					$('mainPanel_pad').empty();
				}
	
				this.set('send', {
					onComplete: function(response) { 
	 						MUI.updateContent({
							'element': $('mainPanel'),
							'content': response,
							'title': 'Ajax Response',
							'padding': { top: 8, right: 8, bottom: 8, left: 8 }
						});			
					},
					onSuccess: function(){
						if (MUI.options.standardEffects == true) {
							$('postContent').setStyle('opacity', 0).get('morph').start({'opacity': 1});
						}
					}
				});
				this.send();
			});		
		}
	});
	
	// Add panels to main column	
	new MUI.Panel({
		id: 'mainPanel',
		title: 'Lorem Ipsum',
		contentURL: 'pages/lipsum.html',
		column: 'mainColumn',
		headerToolbox: true,
		headerToolboxURL: 'pages/toolbox-demo2.html',
		headerToolboxOnload: function(){
			if ($('demoSearch')) {
				$('demoSearch').addEvent('submit', function(e){
					e.stop();
					$('spinner').setStyle('visibility', 'visible');
					if ($('postContent') && MUI.options.standardEffects == true) {
						$('postContent').setStyle('opacity', 0);
					}
					else {
						$('mainPanel_pad').empty();
					}
					this.set('send', {
						onComplete: function(response){
							MUI.updateContent({
								'element': $('mainPanel'),
								'content': response,
								'title': 'Ajax Response',
								'padding': {
									top: 8,
									right: 8,
									bottom: 8,
									left: 8
								}
							});
						},
						onSuccess: function(){
							if ($('postContent') && MUI.options.standardEffects == true) {								
								$('postContent').setStyle('opacity', 0).get('morph').start({'opacity': 1});
							}
						}
					});
					this.send();
				});
			}
		}		
	});
	
	new MUI.Panel({
		id: 'mochaConsole',
		addClass: 'mochaConsole',
		title: 'Console',
		contentURL: 'pages/lipsum.html',
		column: 'mainColumn',
		height: 200,	
		headerToolbox: true,
		headerToolboxURL: 'pages/console.toolbox.html',
		headerToolboxOnload: function(){
			$$('.demoAction').each(function(element){
				element.removeEvents();
				element.addEvent('click', function(e){
					MUI.notification('Do Something');
				});
			});
		}
	});
	
	// Add panels to second side column
	
	new MUI.Panel({
		id: 'help-panel',
		contentURL: 'pages/overview.html',
		column: 'sideColumn2',
		tabsURL: 'pages/panel-tabs.html',
		require: {
			css: [MUI.themePath() + 'css/Tabs.css']
		}		
	});

	new MUI.Panel({
		id: 'panel3',
		title: 'Panel',
		contentURL: 'pages/lipsum.html',
		column: 'sideColumn2',
		height: 120
	});	
	
	new MUI.Panel({
		id: 'tips-panel',
		title: 'Tips',
		contentURL: 'pages/tips.html',
		column: 'sideColumn2',
		height: 140,
		footer: true
	});
	
	MUI.splitPanelPanel = function() {
		if ($('mainPanel')) {			
			new MUI.Column({
				container: 'mainPanel',
				id: 'sideColumn3',
				placement: 'left',
				width: 200,
				resizeLimit: [100, 300]
			});
			
			new MUI.Column({
				container: 'mainPanel',
				id: 'mainColumn2',
				placement: 'main',
				width: null,
				resizeLimit: [100, 300]
			});
			
			new MUI.Panel({
				header: false,
				id: 'splitPanel_mainPanel',
				contentURL: 'license.html',
				column: 'mainColumn2'
			});
			
			new MUI.Panel({
				header: false,
				id: 'splitPanel_sidePanel',
				addClass: 'panelAlt',
				contentURL: 'pages/lipsum.html',
				column: 'sideColumn3'
			});
		}
	}
	
	MUI.myChain.callChain();
	
}

